<template>
  <div class="dir_wrap">
    <el-button type="success" @click="open">添加目录</el-button>
    <el-table
      @current-change="TableChange"
      :highlight-current-row="true"
      :data="dirList"
      border
    >
      <el-table-column label="目录" prop="CDName"> </el-table-column>
      <el-table-column label="课件数" prop="CourseNumber"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-link type="success" @click="toEdit(scope.row)">编辑</el-link>
            <el-link type="danger" @click="delDir(scope.row._id)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dirTitle" width="40%" :visible="dirFlag">
      <el-input v-model="dirName"></el-input>
      <span slot="footer">
        <el-button type="success" @click="sure">{{ dirBtn }}</el-button>
        <el-button type="danger" @click="dirFlag = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { _addDir, _delCourseDir, _editDir } from '../../api/courseadd.js'
export default {
  data () {
    return {
      dirTitle: '添加目录',
      dirBtn: '确定',
      dirFlag: false,
      dirName: '', //目录名称,
      dirid: '', //编辑目录_id
      dirList: [] //目录列表
    }
  },
  watch: {
    fdirList (newVal) {
      this.dirList = newVal
    }
  },
  props: ['fdirList'],
  methods: {
    TableChange (row) {
      console.log(row._id) //目录_id
      // 传送目录_id 给视频组件
      this.$store.commit('changeDirId', row._id)
      this.$bus.$emit('changeDirId', row._id)
      console.log('-------------------------', row._id)
    },
    toEdit (row) {
      //编辑目录
      this.dirFlag = true
      this.dirTitle = '编辑目录'
      this.dirBtn = '确定编辑'
      this.dirName = row.CDName
      this.dirid = row._id //目录_id
    },
    async delDir (_id) {
      // 删除目录'
      var res = await _delCourseDir({
        CDid: this.$route.query._id, //课程_id
        _id: _id
      })
      console.log(res)
      this.$parent.getDir()
    },
    open () {
      this.dirFlag = true
    },
    async sure () {
      if (this.dirid) {
        // 编辑目录
        var editRes = await _editDir({
          CDName: this.dirName,
          CDid: this.$route.query.ID,
          dirid: this.dirid, //目录_id
          _id: this.$route.query._id
        })
        console.log(editRes)
      } else {
        //添加目录
        var res = await _addDir({
          CDName: this.dirName, //目录名称
          CDid: '' + this.$route.query.ID, //课程的ID 加''
          _id: this.$route.query._id
        })
        this.$message.success('添加目录成功')
      }
      this.$parent.getDir()
      this.dirTitle = '添加目录'
      this.dirBtn = '确定'
      this.dirid = ''
      this.CDName = ''
      this.dirFlag = false
      console.log(res)
      this.dirList = res.data.list
    }
  }
}
</script>
<style lang="less" scoped>
.dir_wrap {
  width: 45%;
}
// ui组件库 样式击穿
/deep/.current-row td {
  background: greenyellow !important;
}
</style>
